<template>
  <div class="score">
    <div class="header">
      <div class="center"><h2>排行榜</h2></div>
      <div class="right">
        <el-button type="primary" round @click="gotoback()">返回</el-button>
      </div>
    </div>
    <div class="container">
      <!-- 表格 -->
      <el-table
        :data="content"
        border
        style="width: 90%; margin: 0 auto"
        :default-sort="{ prop: 'grade', order: 'descending' }"
      >
        <el-table-column prop="answerDate" label="作答时间" width="180">
        </el-table-column>
        <el-table-column prop="userName" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="grade" label="得分" width="180">
        </el-table-column>
        <el-table-column prop="examName" label="试卷"> </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script type="text/javascript">
import "@/assets/less/score.less";
export default {
  name: "Score",
  data() {
    return {
      currentPage: 1, //页数
      pageSize: 10, //每一页多少个
      content: [],
      grade: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      total: 0, //总共个数
    };
  },
  created() {
    this.getGradeList();
  },
  methods: {
    // 获取排行榜
    getGradeList() {
      var params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        examId: this.$route.query.examId,
      };
      // 请求数据
      this.$http.get("/student/getUserGradeList", { params }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.content = res.data.content;
          this.total = res.data.total;
        }
      });
    },

    // 返回
    gotoback() {
      this.$router.push("/examdetail");
    },

    // 上一页
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getGradeList();
    },

    // 下一页
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.getGradeList();
    },
  },
};
</script>